<template>
  <view class="userLayout">
    <up-modal
      :show="showModal"
      title="温馨提示"
      :content="content"
      showCancelButton
      confirmColor="#fab6bd"
      @confirm="logout"
      @cancel="cancle"></up-modal>
    <view class="userInfo">
      <view class="avatar" @click="changeAvatar">
        <!--  默认的未登录用的头像 -->
        <image
          :src="
            avatar
              ? 'http://localhost:8080/api/avatar/' + avatar
              : '../../static/defaultAvatar.jpg'
          "
          mode="aspectFill"></image>
      </view>
      <view class="info" v-if="username">
        <view class="nickName">
          {{ username }}
        </view>
        <view class="balance">
          余额: <text>{{ balance }}</text>
        </view>
      </view>
      <view class="nickName" v-else @click="goLogin">去登录</view>
    </view>
    <view
      class="nav-item"
      hover-class="none"
      v-for="item in listData"
      :key="item.url"
      @click="goPage(item.url)">
      <view class="row">
        <view class="left">
          <u-icon :name="item.icon" color="#f7c7bd" size="25"></u-icon>
          <view class="text">{{ item.text }}</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#aaa" size="20"></u-icon>
        </view>
      </view>
    </view>
    <view class="fotter" v-if="username">
      <!-- 修改个人信息 -->
      <view class="fotter-item" @click="updateUserInfo">
        <text>修改个人信息</text>
      </view>
      <!-- 退出登录按钮 -->
      <view class="fotter-item" @click="goLogout">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useUserStore } from '../../stores/user.js'
import { useCartStore } from '../../stores/cart.js'

const userStore = useUserStore()
const carStore = useCartStore()
// 用户信息
const username = ref('')
const avatar = ref('')
const balance = ref(0)
const getUserInfo = () => {
  try {
    const value = JSON.parse(uni.getStorageSync('user'))
    // 设置用户名
    username.value = value.userInfo.username || ''
    // 设置头像
    avatar.value = value.userInfo.avatar || ''
    // 设置余额
    balance.value = value.userInfo.balance || 0
  } catch (e) {
    console.log(e)
  }
}
onLoad(() => {
  getUserInfo()
})
onShow(() => {
  getUserInfo()
})

// 还未登录 去登录
const goLogin = () => {
  // 跳转到登录页
  uni.reLaunch({
    url: '/pages/loginAndRegister/loginAndRegister',
  })
}

// 点击跳转到对应页面
const goPage = (url) => {
  uni.navigateTo({
    url,
  })
}

// 点击修改个人信息
const updateUserInfo = () => {
  uni.navigateTo({
    url: '/pages/updateUserInfo/updateUserInfo',
  })
}

// 退出登录提示框内容
const showModal = ref(false) // 控制modal是否显示
const content = ref('您确认要退出吗？') // modal内容
// 点击退出登录
const goLogout = () => {
  showModal.value = true
}
// “取消” -> 隐藏modal
const cancle = () => {
  showModal.value = false
}

// “确认” -> 退出登录
const logout = () => {
  // 关闭提示框
  showModal.value = false
  // 退出登录返回首页
  uni.reLaunch({
    url: '/pages/index/index',
  })
  // 清空用户信息
  userStore.setUserInfo({})
  userStore.setStarList([])
  carStore.setGoodsNum(0)
  carStore.setCar([])
}

const listData = [
  {
    url: '/pages/myAddress/myAddress',
    text: '我的收货地址',
    icon: 'car',
  },
  {
    url: '/pages/myStar/myStar',
    text: '我的收藏列表',
    icon: 'star',
  },
  {
    url: '/pages/coupon/coupon',
    text: '我的优惠劵',
    icon: 'coupon',
  },
  {
    url: '/pages/myOrder/myOrder',
    text: '我的甜品订购',
    icon: 'order',
  },
  {
    url: '/pages/myDiyOrder/myDiyOrder',
    text: '我的DIY订单',
    icon: 'order',
  },
]
</script>

<style lang="scss" scoped>
.userLayout {
  .userInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50rpx 0;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      width: 360rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10rpx;
      box-shadow: 0 0 30rpx 10rpx rgba(0, 0, 0, 0.08);
      .nickName {
        font-size: 32rpx;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .balance {
        font-size: 30rpx;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000;
        text {
          color: #bb7755;
        }
      }
    }
  }
  .nav-item {
    .row {
      width: 600rpx;
      height: 30rpx;
      margin: 10rpx auto;
      border-radius: 10rpx;
      background-color: #fff;
      box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          color: #666;
          margin-left: 10rpx;
        }
      }
    }
  }
  .fotter {
    margin-top: 100rpx;
    .fotter-item {
      width: 600rpx;
      height: 60rpx;
      margin: 20rpx auto;
      background-color: #ffffff;
      box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
      letter-spacing: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      border-radius: 30rpx;
      color: #fab6bd;
    }
  }
}
</style>
